<template>
    <div class="fillcontain">
        <el-form :model="formData" label-position="labelPosition" inline="true" ref="formData"
                 class="demo-form-inline" style="margin-left: 10px;margin-right: 10px">
            <el-col :span="6">
                <el-form-item label="">
                    <el-select size="mini" v-model="formData.schoolid" placeholder="请选择校区">
                        <el-option
                            v-for="item in options"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value">
                        </el-option>
                    </el-select>
                </el-form-item>
            </el-col>
            <el-col :span="6">
                <el-form-item label="">
                    <el-select size="mini" v-model="formData.eid" placeholder="请选择老师">
                        <el-option
                            v-for="item in empsList"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value">
                        </el-option>
                    </el-select>
                </el-form-item>
            </el-col>
            <el-col :span="6">
                <el-form-item label="">
                    <el-select size="mini" v-model="value" placeholder="请选择上课时段">
                        <el-option
                            v-for="item in options"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value">
                        </el-option>
                    </el-select>
                </el-form-item>
            </el-col>
            <el-col :span="6">
                <el-form-item label="">
                    <el-select size="mini" v-model="value" placeholder="请选择类别">
                        <el-option
                            v-for="item in options"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value">
                        </el-option>
                    </el-select>
                </el-form-item>
            </el-col>
            <el-col :span="6">
                <el-form-item label="">
                    <el-select size="mini" v-model="value" placeholder="请选择上课时间">
                        <el-option
                            v-for="item in options"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value">
                        </el-option>
                    </el-select>
                </el-form-item>
            </el-col>
            <el-col :span="6">
                <el-form-item label="">
                    <el-select size="mini" v-model="value" placeholder="请选择年份">
                        <el-option
                            v-for="item in options"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value">
                        </el-option>
                    </el-select>
                </el-form-item>
            </el-col>
            <el-col :span="6">
                <el-form-item label="">
                    <el-select size="mini" v-model="value" placeholder="请选择月份">
                        <el-option
                            v-for="item in options"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value">
                        </el-option>
                    </el-select>
                </el-form-item>
            </el-col>
            <el-col :span="6">
                <el-form-item label="">
                    <el-input
                        size="mini"
                        placeholder="第一周"
                        prefix-icon="el-icon-search"
                        v-model="input21">
                    </el-input>
                </el-form-item>
            </el-col>
            <el-col :span="6">
                <el-form-item label="">
                    <el-input
                        size="mini"
                        placeholder="第二周"
                        prefix-icon="el-icon-search"
                        v-model="input21">
                    </el-input>
                </el-form-item>
            </el-col>
            <el-col :span="6">
                <el-form-item label="">
                    <el-input
                        size="mini"
                        placeholder="第三周"
                        prefix-icon="el-icon-search"
                        v-model="input21">
                    </el-input>
                </el-form-item>
            </el-col>
            <el-col :span="6">
                <el-form-item label="">
                    <el-input
                        size="mini"
                        placeholder="第四周"
                        prefix-icon="el-icon-search"
                        v-model="input21">
                    </el-input>
                </el-form-item>
            </el-col>
            <el-col :span="6">
                <el-form-item label="">
                    <el-input
                        size="mini"
                        placeholder="第五周"
                        prefix-icon="el-icon-search"
                        v-model="input21">
                    </el-input>
                </el-form-item>
            </el-col>
            <el-col :span="6">
                <el-form-item label="">
                    <el-select size="mini" v-model="value" placeholder="请选择周数">
                        <el-option
                            v-for="item in options"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value">
                        </el-option>
                    </el-select>
                </el-form-item>
            </el-col>
            <el-button type="primary" size="mini" icon="el-icon-search">搜索</el-button>
        </el-form>
        <div> 2018-04 时间段:周六日下午2：00,任课老师:李欣欣 到校 任课老师检查签字</div>
        <div class="table_container">
            <el-table
                :data="tableData"
                highlight-current-row
                style="width: 100%">
                <el-table-column
                    property="user_name"
                    label="编号"
                    min-width="10%">
                </el-table-column>
                <el-table-column
                    property="subject"
                    label="学生姓名"
                    min-width="10%">
                </el-table-column>
                <el-table-column
                    property="teachers"
                    label="日"
                    min-width="10%">
                </el-table-column>
                <el-table-column
                    property="school"
                    label="课题"
                    min-width="10%">
                </el-table-column>
                <el-table-column
                    property="teachers"
                    label="日"
                    min-width="10%">
                </el-table-column>
                <el-table-column
                    property="school"
                    label="课题"
                    min-width="10%">
                </el-table-column>
                <el-table-column
                    property="teachers"
                    label="日"
                    min-width="10%">
                </el-table-column>
                <el-table-column
                    property="school"
                    label="课题"
                    min-width="10%">
                </el-table-column>
                <el-table-column
                    property="teachers"
                    label="日"
                    min-width="10%">
                </el-table-column>
                <el-table-column
                    property="school"
                    label="课题"
                    min-width="10%">
                </el-table-column>
                <el-table-column
                    property="teachers"
                    label="日"
                    min-width="10%">
                </el-table-column>
                <el-table-column
                    property="school"
                    label="课题"
                    min-width="10%">
                </el-table-column>
                <el-table-column
                    property="school"
                    label="第一周"
                    min-width="10%">
                    <el-table-column
                        property="school"
                        label="家长签字"
                        min-width="10%">
                    </el-table-column>
                </el-table-column>
                <el-table-column
                    property="school"
                    label="第一周"
                    min-width="10%">
                    <el-table-column
                        property="school"
                        label="家长签字"
                        min-width="10%">
                    </el-table-column>
                </el-table-column>
                <el-table-column
                    property="school"
                    label="第一周"
                    min-width="10%">
                    <el-table-column
                        property="school"
                        label="家长签字"
                        min-width="10%">
                    </el-table-column>
                </el-table-column>
                <el-table-column
                    property="school"
                    label="第一周"
                    min-width="10%">
                    <el-table-column
                        property="school"
                        label="家长签字"
                        min-width="10%">
                    </el-table-column>
                </el-table-column>
                <el-table-column
                    property="school"
                    label="第一周"
                    min-width="10%">
                    <el-table-column
                        property="school"
                        label="家长签字"
                        min-width="10%">
                    </el-table-column>
                </el-table-column>
            </el-table>
            <div>
                <el-button>预览并打印周考勤表</el-button>
            </div>
        </div>
    </div>
</template>

<script>
    import headTop from '../components/headTop'
    import addStudent from '../page/addStudent'
    import { monthCheckWorkPrint} from '@/api/getData'
    import ElInput from "../../node_modules/element-ui/packages/input/src/input.vue";
    import ElButton from "../../node_modules/element-ui/packages/button/src/button.vue";

    export default {
        data() {
            return {
                empsList:[],
                tableData: [{
                    registe_time: '2016-05-02',
                    username: '王小虎',
                    city: '上海市普陀区金沙江路 1518 弄'
                }, {
                    registe_time: '2016-05-04',
                    username: '王小虎',
                    city: '上海市普陀区金沙江路 1517 弄'
                }, {
                    registe_time: '2016-05-01',
                    username: '王小虎',
                    city: '上海市普陀区金沙江路 1519 弄'
                }, {
                    registe_time: '2016-05-03',
                    username: '王小虎',
                    city: '上海市普陀区金沙江路 1516 弄'
                }],
                currentRow: null,
                offset: 0,
                limit: 20,
                count: 0,
                currentPage: 1,
            }
        },
        components: {
            ElButton,
            ElInput,
            headTop,
            addStudent,

        },
        computed: {
            ...mapGetters(['schoolList', 'usertypeList', 'periodList', 'empschoolMap', 'onusertypeList'])
        },
        created() {
            this.initData();
        },
        mounted() {
            if (this.periodList.length == 0) {
                this.getPeriod();
            }
            if (this.empschoolMap == null) {
                this.fillSchoolEmps();
            }
            if (this.schoolList == null) {
                this.getAllSchool();
            }
        },
        methods: {
            ...mapActions(['getPeriod', 'setEmpschool', 'deleteEmpschool', 'fillSchoolEmps', 'getAllSchool']),
            async initData() {
                const v = await monthCheckWorkPrint({"data":{"pageno":this.currentPage,"pagesize":this.limit}});
                this.tableData = [];
                var list=v.data.values;
                this.count=v.data.totalCount;
                list.forEach(item => {
                    const tableData = {};
                    tableData.id = item.id;
                    tableData.name = item.name;
                    tableData.type = item.type;
                    this.tableData.push(tableData);
                })
            },
            handleSizeChange(val) {
                console.log(`每页 ${val} 条`);
            },
            handleCurrentChange(val) {
                this.currentPage = val;
                this.offset = (val - 1) * this.limit;
                this.getUsers()
            },
            async getUsers() {
                const Users = await getUserList({offset: this.offset, limit: this.limit});
                this.tableData = [];
                Users.forEach(item => {
                    const tableData = {};
                    tableData.username = item.username;
                    tableData.registe_time = item.registe_time;
                    tableData.city = item.city;
                    this.tableData.push(tableData);
                })
            }
        },
    }
</script>

<style lang="less">
    @import '../style/mixin';

    .table_container {
        padding: 20px;
    }
</style>
